<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的《千里江山图》</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    	<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/resize_meta.js" ></script>
		<script type="text/javascript" src="js/canvasEl.js" ></script>
		<script type="text/javascript" src="js/canvasIm.js" ></script>
		<script type="text/javascript" src="js/excanvas.js" ></script>
		<script type="text/javascript" src="js/html2canvas.min.js" ></script>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<script type="text/javascript" src="js/utilitie.js" ></script>
		<script type="text/javascript" charset="utf-8">
			var YD = YAHOO.util.Dom;
			var YE = YAHOO.util.Event;
			var canvas1 = new Canvas.Element();
			var img = [];
			var countNo = 1;
			
			function init(){
				canvas1.init('canvid1',  { width: 516, height: 921});	//canvas宽高
				img[img.length] = new Canvas.Img('e-bg', {});
				canvas1.setCanvasBackground(img[0]);
			}
							
			YAHOO.util.Event.on(window, 'load', init, null, true);
		</script>
		<script src="js/getWxSettings.js"></script>
		<script type="text/javascript">
			if (window.location.href != window.location.origin + window.location.pathname)
		    {
		        window.location.href = window.location.origin + window.location.pathname;
		    }   
		    wxShare(
			    '来定制你的《千里江山图》', 
				'千年后，3D版《千里江山图》现身！',
				'http://ftwx.fangte.com/j/load.html', //分享地址			
				'http://ftwx.fangte.com/active/sharedImg/jiangshan.jpg' //分享图片
			)
		</script>
	</head>
	<body>
		<div class="e-container">
			<div class="e-cbox">
				<div id="canvasdemo">
					<canvas id="canvid1"></canvas>
					<img src="img/canvas_bg.png" id="e-bg" style="width: 516px;height: 921px;" />
				</div>
			</div>
			<div class="btn-box">
				<img src="img/e_btn2.png" class="e-btn" />
				<img src="img/sd_close.png" class="e-sdbtn e-close" />
				<img src="img/sd_lock.png" class="e-sdbtn e-lock" id="lock" />
				<img src="img/sd_zd.png" class="e-sdbtn e-zd" />
			</div>
			
			<div class="img-box">
				<ul class="img-list mountain">
					<li><img src="img/el_water01.png" alt="" id="e18" /></li>
					<li><img src="img/el_water02.png" alt="" id="e19" /></li>
					<li><img src="img/el_water03.png" alt="" id="e20" /></li>
					<li><img src="img/m01.png" alt="" id="m01" /></li>
					<li><img src="img/m02.png" alt="" id="m02" /></li>
					<li><img src="img/m03.png" alt="" id="m03" /></li>
					<li><img src="img/m04.png" alt="" id="m04" /></li>
					<li><img src="img/m05.png" alt="" id="m05" /></li>
					<li><img src="img/m06.png" alt="" id="m06" /></li>
					<li><img src="img/m07.png" alt="" id="m07" /></li>
					<li><img src="img/m08.png" alt="" id="m08" /></li>
					<li><img src="img/m09.png" alt="" id="m09" /></li>
					<li><img src="img/m10.png" alt="" id="m010" /></li>
					<li><img src="img/m11.png" alt="" id="m011" /></li>
					<li><img src="img/m12.png" alt="" id="m012" /></li>
					<li><img src="img/m13.png" alt="" id="m013" /></li>
					<li><img src="img/m14.png" alt="" id="m014" /></li>
					<li><img src="img/m15.png" alt="" id="m015" /></li>
					<li><img src="img/m16.png" alt="" id="m016" /></li>
					<li><img src="img/m17.png" alt="" id="m017" /></li>
					<li><img src="img/m18.png" alt="" id="m018" /></li>
					<li><img src="img/m19.png" alt="" id="m019" /></li>
					<li><img src="img/m20.png" alt="" id="m20" /></li>
					<li><img src="img/m21.png" alt="" id="m21" /></li>
					<li><img src="img/m22.png" alt="" id="m22" /></li>
					<li><img src="img/m23.png" alt="" id="m23" /></li>
					<li><img src="img/m24.png" alt="" id="m24" /></li>
					<li><img src="img/m26.png" alt="" id="m26" /></li>
					<li><img src="img/m27.png" alt="" id="m27" /></li>					
				</ul>
				<ul class="img-list tree">
					<li><img src="img/tree01.png" alt="" id="t01" /></li>
					<li><img src="img/tree02.png" alt="" id="t02" /></li>
					<li><img src="img/tree03.png" alt="" id="t03" /></li>
					<li><img src="img/tree04.png" alt="" id="t04" /></li>
					<li><img src="img/tree05.png" alt="" id="t05" /></li>
					<li><img src="img/tree06.png" alt="" id="t06" /></li>
					<li><img src="img/tree07.png" alt="" id="t07" /></li>
					<li><img src="img/tree08.png" alt="" id="t08" /></li>
					<li><img src="img/tree09.png" alt="" id="t09" /></li>
				</ul>
				<ul class="img-list house">
					<li><img src="img/house01.png" alt="" id="h01" /></li>
					<li><img src="img/house02.png" alt="" id="h02" /></li>
					<li><img src="img/house03.png" alt="" id="h03" /></li>
					<li><img src="img/house04.png" alt="" id="h04" /></li>
					<li><img src="img/house05.png" alt="" id="h05" /></li>
					<li><img src="img/house06.png" alt="" id="h06" /></li>
					<li><img src="img/house08.png" alt="" id="h08" /></li>
					<li><img src="img/house09.png" alt="" id="h09" /></li>
					<li><img src="img/house10.png" alt="" id="h10" /></li>
				</ul>
				<ul class="img-list else">
					<li><img src="img/el_boat.png" alt="" id="e01" /></li>
					<li><img src="img/el_bridge.png" alt="" id="e02" /></li>
					<li><img src="img/el_bridge1.png" alt="" id="e03" /></li>
					<li><img src="img/el_wcar.png" alt="" id="e04" /></li>
					<li><img src="img/el_wcar2.png" alt="" id="e05" /></li>
					<li><img src="img/el_banche.png" alt="" id="e06" /></li>
					<li><img src="img/el_barrel.png" alt="" id="e07" /></li>
					<li><img src="img/el_boat2.png" alt="" id="e08" /></li>
					<li><img src="img/el_boat3.png" alt="" id="e09" /></li>
					<li><img src="img/el_dao.png" alt="" id="e10" /></li>
					<li><img src="img/el_gz.png" alt="" id="e11" /></li>
					<li><img src="img/el_lz01.png" alt="" id="e12" /></li>
					<li><img src="img/el_lz02.png" alt="" id="e13" /></li>
					<li><img src="img/el_lz03.png" alt="" id="e14" /></li>
					<li><img src="img/el_lz04.png" alt="" id="e15" /></li>
					<li><img src="img/el_lz05.png" alt="" id="e16" /></li>
					<li><img src="img/el_wall.png" alt="" id="e17" /></li>
					
				</ul>
				<ul class="handle-list">
					<li class="handle-arr"><img src="img/arr_up.png"/></li>
					<li class="handle-item">
						<img src="img/handle_icon1.png" alt="" />
						<p>山水</p>
					</li>
					<li class="handle-item">
						<img src="img/handle_icon2.png" alt="" />
						<p>树</p>
					</li>
					<li class="handle-item">
						<img src="img/handle_icon3.png" alt="" />
						<p class="house-text">房</p>
					</li>
					<li class="handle-item">
						<img src="img/handle_icon4.png" alt="" />
						<p>其它</p>
					</li>
				</ul>
			</div>
		</div>
		<!--预览图片弹出框-->
		<div class="s1-container">
			<div id="s1-box">
				<div class="s1-img-box">
					<img src="img/share_result.png"  class="s1-img" />
				</div>
				<div class="text-box clear">
					<img src="img/ewcode.png" class="fl s1-code" />
					<div class="fl s1-text">
						<p>长按识别二维码</p>
						<p>定制我的《千里江山图》</p>
					</div>
					<img src="img/share_logo.png" class="fr s1-logo" />		
				</div>
				<img src="img/share_text.png" class="s1-text-img" />	
				<div class="s1-opacity"></div>
			</div>
			<div class="s1-longtext">长按图片保存我的《千里江山图》</div>
			<div class="s1-bottom">
				<button class="s1-btn s1-left">修改作品</button>
				<button class="s1-btn s1-right">分享</button>
			</div>			
		</div>
		
		<div class="share-dialog">
			<img src="img/share0.png" class="share-img" />
		</div>
	</body>
	<script type="text/javascript" src="js/edit.js" ></script>
</html>
